<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人信息</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
  <van-row>
    <van-col span="24">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-col>
    <van-col span="24">
      <div class="box m-4">
        <van-cell title="头像" size="large">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-image
              round
              width="28"
              height="28"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </template>
        </van-cell>
        <van-cell title="用户账号" size="large" is-link></van-cell>
        <van-cell title="用户昵称" size="large" @click="showPopup" value="爱马仕" is-link></van-cell>
        <van-cell title="邮箱" size="large" is-link></van-cell>
        <van-cell title="手机号码" size="large" is-link></van-cell>
        <van-cell title="生日" size="large" @click="showPopup2" is-link></van-cell>
        <van-popup
          v-model="show"
          closeable
          position="bottom"
          :style="{ height: '30%' }"
        >
          <div style="margin: 50px 20px 20px 20px">
                        <textarea class="w-100 p-3 border bg-f9 mb-3" style="box-sizing: border-box"
                                  placeholder="请输入你的昵称">爱马仕</textarea>
            <van-button type="primary" block>确认修改</van-button>
          </div>
        </van-popup>
        <van-popup
          v-model="show2"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="TimeHide"
          ></van-datetime-picker>
        </van-popup>

      </div>
    </van-col>
    <van-col span="24">
      <div class="m-4">
        <div class="w-100 pr-2">
          <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block>确认保存</van-button>
        </div>
      </div>
    </van-col>
  </van-row>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        show: false,
        show2: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      };
    },
    methods: {
      onClickLeft() {
        Toast('返回');
      },
      showPopup() {
        this.show = true;
      },
      showPopup2() {
        this.show2 = true;
      },
      TimeHide() {
        this.show2 = false;
      }
    },
  });
</script>
</html>
